<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于JQuery+PHP编写砸金蛋中奖程序</title>
	<style>
		.egg{width:660px; height:400px; margin:50px auto 20px auto;}   
		.egg ul li{z-index:999;list-style-type:none;}   
		.eggList{padding-top:110px;position:relative;width:660px;}   
		.eggList li{float:left;background:url(images/egg_1.png) no-repeat bottom;width:158px;   
		height:187px;cursor:pointer;position:relative;margin-left:35px;}   
		.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0;   
		 font-size:42px; font-weight:bold}   
		.eggList li.curr{background:url(images/egg_2.png) no-repeat bottom;cursor:default;z-index:300;}   
		.eggList li.curr sup{position:absolute;background:url(images/img-4.png) no-repeat;width:232px;   
		height:181px;top:-36px;left:-34px;z-index:800;}   
		.hammer{background:url(images/img-6.png) no-repeat;width:74px;height:87px;position:absolute;   
		text-indent:-9999px;z-index:150;left:200px;top:80px;}   
		.resultTip{position:absolute; background:#ffc ;width:148px;padding:6px;z-index:500;top:200px;   
		left:10px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;}   
		.resultTip b{font-size:14px;line-height:24px;}  
	</style>
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="egg">   
	 	<ul class="eggList">   
		 	<p class="hammer" id="hammer">锤子</p>   
		 	<p class="resultTip" id="resultTip"><b id="result"></b></p>   
		 	<li><span>1</span><sup></sup></li>   
		 	<li><span>2</span><sup></sup></li>   
		 	<li><span>3</span><sup></sup></li>   
	 	</ul>   
	</div>
	<script>
		// 当鼠标滑向金蛋时，用于砸金蛋的锤子会仅靠金蛋右上方
		$(".eggList li").hover(function() {   
		 	var posL = $(this).position().left + $(this).width();  
		 	$("#hammer").show().css('left', posL);   
		})
		// 点击金蛋，影藏数字和调用砸金蛋函数
		$(".eggList li").click(function() {   
		 	$(this).children("span").hide();   
		 	eggClick($(this));   
		});
		// 砸金蛋函数
		function eggClick(obj) {   
		 	var _this = obj;   
		 	$.getJSON("data.php",function(res){//ajax请求   
		 		_this.unbind('click'); //解除click   
		 		$(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185});   
		 		$(".hammer").animate({//锤子动画   
		 		"top":_this.position().top-25,   
		 		"left":_this.position().left+125   
			 	},30,function(){   
			 		_this.addClass("curr"); //蛋碎效果   
			 		_this.find("sup").show(); //金花四溅   
			 		$(".hammer").hide();//隐藏锤子   
			 		$('.resultTip').css({display:'block',top:'100px',left:_this.position().   
			 		left+45,opacity:0}).animate({top: '50px',opacity:1},300,function(){//中奖结果动画
				  		if(res.msg==1){//返回结果   
				  			$("#result").html("恭喜，您中得"+res.prize+"!");   
				  		}else{   
				  			$("#result").html("很遗憾,您没能中奖!");   
				  		}   
			 		});   
			 	});   
		 	});   
		}    
	</script>
</body>
</html>